<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
    <title>深度监视</title>
</head>

<body>
    <!--
    深度监视：
      1，vue中watch默认不监测内部对象值的变化（一层）
      2。配置deep：true 可以检测对象内部值的变化（多层）
    备注：
      1。vue自身可以检测对象内部值变化，但weu提供的watch默认不可以
      2。使用watch时根据数据具体结构，决定是否采用深度监视。
-->
    <div id="root">
        <h1>今天天气很{{info}} </h1>
        <button @click="update">修改天气</button><br/>
        <h3> a 的值是：{{numbers.a}}</h3>
        <button @click="numbers.a++">点我让a++</button><br/>
        <h3> b 的值是：{{numbers.b}}</h3>
        <button @click="numbers.b++">点我让a++</button>
    </div>
    <script>
        const vm = new Vue({
            el: '#root',
            data: {
                tianqi: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            },
            methods: {
                update() {
                    this.tianqi = !this.tianqi;
                }
            },
            computed: {
                info() {
                    return this.tianqi ? "很热" : "很冷"
                }
            },
            watch: {
                tianqi: {
                    handler(newvalue, oldvalue) {
                        console.log("tianqi呗修改", newvalue, oldvalue)
                    }
                },
                //监视多级结构中的某个属性的变化
                // 'numbers.a':{
                //   handler() {
                //     console.log("a被变化了",this.numbers.a)
                //   }
                // }
                //监视多级结构中的所有属性的变化
                'numbers': {
                    deep: true,
                    handler() {
                        console.log("numbers发生变化", this.numbers.a, this.numbers.b)
                    }
                }
            }

        })
    </script>
</body>

</html>